import { mapGetters, mapActions } from "vuex";
import PopupPicker from "vux/src/components/popup-picker/index.vue";
import XAddress from "vux/src/components/x-address/index.vue";
import ChinaAddressV4Data from "vux/src/datas/china_address_v4.json";

import template from "./bindBankTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  components: {
    PopupPicker,
    XAddress,
  },
  data() {
    return {
      bankPopup: false,

      bank_id: null,
      customBankName: name,
      UnionPayShow: false,
      AlipayShow: false,
      WeChatShow: false,
      userBankedData: {},

      UnionName: "",
      UnionCardNo: "",
      UnionSubBranch: "",
      UnionMobile: "",

      verifyUnionCardNo: function (value) {
        return {
          valid: /^([1-9]{1})(\d{15,18})$/.test(value),
          msg: "请输入16-19位卡号",
        };
      },
      verifyUnionMobile: function (value) {
        return {
          valid: /^[0-9]{11}$/.test(value),
          msg: "输入的手机号码格式错误！",
        };
      },

      AliAcc: "",
      AliNickName: "",
      AliUserName: "",
      AliMobile: "",

      verifyAliAcc: function (value) {
        return {
          valid: /^[a-zA-Z0-9_-]{3,30}$/.test(value),
          msg: "输入的支付宝格式错误！",
        };
      },
      verifyAliMobile: function (value) {
        return {
          valid: /^[0-9]{11}$/.test(value),
          msg: "输入的手机号码格式错误！",
        };
      },

      wxAcc: "",
      wxNickName: "",
      wxUserName: "",
      wxMobile: "",

      verifywxAcc: function (value) {
        return {
          valid: /^[a-zA-Z0-9_-]{3,30}$/.test(value),
          msg: "输入的微信格式错误！",
        };
      },
      verifywxMobile: function (value) {
        return {
          valid: /^[0-9]{11}$/.test(value),
          msg: "输入的手机号码格式错误！",
        };
      },
      issuingBankValue: [],
      issuingBankList: [],
      addressData: ChinaAddressV4Data,
      addressValue: [],
      bankListData: [],
    };
  },
  created() {
    this.getUserIsBindCard();
    this.userAccounData = this.accountData;
    this.newUserInfo = this.userInfo;
    this._getissuingBankList();
  },
  mounted() {
    this.bank_id = this.$route.query.bank_id;
    if (this.bank_id == 1) {
      this.UnionPayShow = true;
      this.customBankName = "银行卡";
      return false;
    }
    if (this.bank_id == 2) {
      this.AlipayShow = true;
      this.customBankName = "支付宝";
      return false;
    }
    if (this.bank_id == 3) {
      this.WeChatShow = true;
      this.customBankName = "微信";
      return false;
    }
  },
  computed: {
    ...mapGetters(["userInfo", "bankedData", "accountData"]),
  },
  methods: {
    ...mapActions([
      "SET_USER_INFO_DATA",
      "SET_BANKED_DATA",
      "SET_ACCOUNT_DATA",
    ]),

    onConfirm() {
      if (this.bank_id == 1) {
        this.bankAjax();
        return false;
      }
      if (this.bank_id == 2) {
        this.alipayAjax();
        return false;
      }
      if (this.bank_id == 3) {
        this.weChatAjax();
        return false;
      }
    },
    _getissuingBankList() {
      //获取银行列表
      this.$vux.loading.show();
      this.$http
        .post(this.urlRequest + "?m=api&c=bank&a=getConfigBanks")
        .then((res) => {
          this.$vux.loading.hide();
          this.bankListData = res.list;
          var arr = [];
          for (var key in this.bankListData) {
            arr.push(this.bankListData[key].name);
          }
          this.issuingBankList.push(arr);
        })
        .catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.show({
            text: "数据请求超时",
          });
        });
    },
    getUserIsBindCard() {
      var params = {
        token: localStorage.getItem("token"),
      };
      var that = this;
      that.$vux.loading.show();
      that.$http
        .post(that.urlRequest + "?m=api&c=bank&a=getUserBank", params)
        .then((res) => {
          that.$vux.loading.hide();
          that.userBankedData = res;
          if (res.name) {
            that.UnionName = res.name;
            that.AliUserName = res.name;
            that.wxUserName = res.name;
          }
          localStorage.setItem("bankedData", JSON.stringify(res));
          that.SET_BANKED_DATA({
            obj: res,
          });
        })
        .catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.show({
            text: "数据请求超时",
          });
        });
    },

    bindUnion() {
      //绑定银行卡
      console.log("this.UnionCardNo", this.UnionCardNo);

      if (!this.UnionName) {
        this.$refs.UnionNameRef.focus();
        this.$vux.toast.show({
          text: "持卡人不能为空",
        });
        return false;
      }

      if (!this.UnionCardNo) {
        this.$refs.UnionCardNoRef.focus();
        this.$vux.toast.show({
          text: "银行卡号不能为空",
        });
        return false;
      }
      if (!/^([1-9]{1})(\d{15,18})$/.test(this.UnionCardNo)) {
        this.$refs.UnionCardNoRef.focus();
        this.$vux.toast.show({
          text: "请输入16-19位卡号",
        });
        return false;
      }
      if (this.issuingBankValue == "") {
        this.$vux.toast.show({
          text: "发卡银行不能为空",
        });
        return false;
      }
      if (this.addressValue == "") {
        this.$vux.toast.show({
          text: "支行银行不能为空",
        });
        return false;
      }
      this.bankListData.forEach((val) => {
        var that = this;
        if (val.name == that.issuingBankValue) {
          that.issuingBankVal = val.id;
        }
      });
      if (!this.UnionSubBranch) {
        this.$refs.UnionSubBranch.focus();
        this.$vux.toast.show({
          text: "详细支行名称不能为空",
        });
        return false;
      }
      if (this.UnionMobile) {
        if (!/^[0-9]{11}$/.test(this.UnionMobile)) {
          this.$refs.UnionMobile.focus();
          this.$vux.toast.show({
            text: "输入的手机号码格式错误！",
          });
          return false;
        }
      }
      this.bankParams = {
        token: localStorage.getItem("token"),
        name: this.UnionName,
        account: this.UnionCardNo,
        bank: this.issuingBankVal,
        branch: this.$refs.addressValue.nameValue + " " + this.UnionSubBranch,
        mobile: this.UnionMobile,
      };
      console.log(this.bankParams);
      if (this.userInfo.realname == "") {
        this.bankPopup = true;
      } else {
        this.bankAjax();
      }
    },
    bankAjax() {
      this.$vux.loading.show();
      this.$http
        .post(this.urlRequest + "?m=api&c=bank&a=bank", this.bankParams)
        .then((res) => {
          this.$vux.loading.hide();
          if (res.status == 0) {
            this.userAccounData.is_banded_bank = "1";
            if (this.newUserInfo.realname) {
              this.newUserInfo.realname = this.UnionName;
              this.SET_USER_INFO_DATA({
                Obj: this.newUserInfo,
              });
            }
            this.SET_ACCOUNT_DATA({
              Obj: this.userAccounData,
            });
            this.getUserIsBindCard();
            this.$vux.toast.show({
              text: "绑定银行卡成功！",
            });
            this.$router.push({
              path: "/bank/bindOK",
              query: {
                bank_id: 1,
                bank: this.issuingBankValue,
                account: this.UnionCardNo,
              },
            });
          } else {
            if (res.ret_msg && res.ret_msg != "") {
              this.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          }
        })
        .catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.show({
            text: "数据请求超时",
          });
        });
    },
    bindAlipay() {
      //绑定支付宝
      if (!this.AliAcc) {
        this.$refs.AliAcc.focus();
        this.$vux.toast.show({
          text: "支付宝不能为空",
        });
        return false;
      }

      if (!this.AliNickName) {
        this.$refs.AliNickName.focus();
        this.$vux.toast.show({
          text: "用户昵称不能为空",
        });
        return false;
      }
      if (!this.AliUserName) {
        this.$refs.AliUserName.focus();
        this.$vux.toast.show({
          text: "真实姓名不能为空",
        });
        return false;
      }

      if (!this.AliMobile) {
        this.$refs.AliMobile.focus();
        this.$vux.toast.show({
          text: "手机不能为空",
        });
        return false;
      }
      if (!/^[0-9]{11}$/.test(this.AliMobile)) {
        this.$refs.AliMobile.focus();
        this.$vux.toast.show({
          text: "输入的手机号码格式错误！",
        });
        return false;
      }
      this.alipayParams = {
        token: localStorage.getItem("token"),
        account: this.AliAcc,
        nickname: this.AliNickName,
        name: this.AliUserName,
        mobile: this.AliMobile,
        flag_b: 2,
      };
      console.log(this.alipayParams);
      if (this.userInfo.realname == "") {
        this.bankPopup = true;
      } else {
        this.alipayAjax();
      }
    },
    alipayAjax() {
      this.$vux.loading.show();
      this.$http
        .post(
          this.urlRequest + "?m=api&c=bank&a=bindWeChatAndAlipay",
          this.alipayParams
        )
        .then((res) => {
          this.$vux.loading.hide();
          if (res.status == 0) {
            this.userAccounData.is_banded_bank = "1";
            if (this.newUserInfo.realname) {
              this.newUserInfo.realname = this.UnionName;
              this.SET_USER_INFO_DATA({
                Obj: this.newUserInfo,
              });
            }
            this.SET_ACCOUNT_DATA({
              Obj: this.userAccounData,
            });
            this.getUserIsBindCard();
            this.$vux.toast.show({
              text: "绑定支付宝成功！",
            });
            this.$router.push({
              path: "/bank/bindOK",
            });
          } else {
            if (res.ret_msg && res.ret_msg != "") {
              this.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          }
        })
        .catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.show({
            text: "数据请求超时",
          });
        });
    },
    bindWeChat() {
      //绑定微信
      if (!this.wxAcc) {
        this.$refs.wxAcc.focus();
        this.$vux.toast.show({
          text: "微信不能为空",
        });
        return false;
      }

      if (!this.wxNickName) {
        this.$refs.wxNickName.focus();
        this.$vux.toast.show({
          text: "用户昵称不能为空",
        });
        return false;
      }
      if (!this.wxUserName) {
        this.$refs.wxUserName.focus();
        this.$vux.toast.show({
          text: "真实姓名不能为空",
        });
        return false;
      }

      if (!this.wxMobile) {
        this.$refs.wxMobile.focus();
        this.$vux.toast.show({
          text: "手机不能为空",
        });
        return false;
      }
      if (!/^[0-9]{11}$/.test(this.wxMobile)) {
        this.$refs.wxMobile.focus();
        this.$vux.toast.show({
          text: "输入的手机号码格式错误！",
        });
        return false;
      }
      this.weChatparams = {
        token: localStorage.getItem("token"),
        account: this.wxAcc,
        nickname: this.wxNickName,
        name: this.wxUserName,
        mobile: this.wxMobile,
        flag_b: 1,
      };
      console.log(this.weChatparams);
      if (this.userInfo.realname == "") {
        this.bankPopup = true;
      } else {
        this.weChatAjax();
      }
    },
    weChatAjax() {
      this.$vux.loading.show();
      this.$http
        .post(
          this.urlRequest + "?m=api&c=bank&a=bindWeChatAndAlipay",
          this.weChatparams
        )
        .then((res) => {
          this.$vux.loading.hide();
          if (res.status == 0) {
            this.userAccounData.is_banded_bank = "1";
            if (this.newUserInfo.realname) {
              this.newUserInfo.realname = this.UnionName;
              this.SET_USER_INFO_DATA({
                Obj: this.newUserInfo,
              });
            }
            this.SET_ACCOUNT_DATA({
              Obj: this.userAccounData,
            });
            this.getUserIsBindCard();
            this.$vux.toast.show({
              text: "绑定微信成功！",
            });
            this.$router.push({
              path: "/bank/bindOK",
            });
          } else {
            if (res.ret_msg && res.ret_msg != "") {
              this.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          }
        })
        .catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.show({
            text: "数据请求超时",
          });
        });
    },
  },
  watch: {
    userInfo(obj) {
      if (obj.realname) {
        this.UnionName = obj.realname;
        this.newUserInfo = obj;
      }
    },
    accountData(obj) {
      if (obj.user_id) {
        this.userAccounData = obj;
      }
    },
    issuingBankValue(val) {
      for (var key in this.bankListData) {
        if (this.bankListData[key].name == val) {
          this.issuingBankVal = this.bankListData[key];
        }
      }
    },
  },
};

// WEBPACK FOOTER //
// ./src/components/wallet/bank/bindBank.vue
